<template>
  <div style="background-color: white; flex: 1">
    <!-- <h1 class="tagline">
      <span class="accent">Electron-Egg</span>
    </h1>

    <p class="description" @click="getvideo()">目标搜索界面</p> -->

    <!-- <div id="HikVideo">
      <video id='videoLive' controls autoplay autobuffer muted preload='auto'
        style='width: 1280px; height: 720px; object-fit: fill;'></video>
    </div> -->
    <div
      style="display: flex; background-color: white; width: 100%; height: 100%"
    >
      <view
        class="leftCerten"
        style="background: white; flex: 0 0 60%; border: 1px solid #edeeed"
      >
        <!-- style="cursor: crosshair" -->
        <div
          v-if="sdgz == 1"
          class="overlay"
          @mousemove="getMousePosition"
          @click="getpos"
        ></div>
        <div class="content" style="width: 100%; height: 100%">
          <img
            class="full-image"
            src="@/assets/fileimage.jpeg"
            alt="Description of Image"
          />
        </div>
      </view>

      <view
        style="
          display: flex;
          flex: 0 0 40%;
          background-color: white;
          flex-direction: column;
        "
      >
        <view
          class="rightTop"
          style="background: white; flex: 0 0 70%; border: 1px solid #edeeed"
        >
          <div>光学调焦 操作区域</div>
          <div style="border: 1px solid #edeeed; padding-bottom: 5px">
            <view>
              <view>
                <el-button
                  type="primary"
                  style="margin-top: 20px"
                  :disabled="sdgz == 1"
                  >Zoom-</el-button
                >
                <el-button
                  type="primary"
                  style="margin-top: 20px"
                  :disabled="sdgz == 1"
                  >Zoom+</el-button
                >
                <el-button
                  type="primary"
                  style="margin-top: 20px"
                  :disabled="sdgz == 1"
                  >Focus-</el-button
                >
                <el-button
                  type="primary"
                  style="margin-top: 20px"
                  :disabled="sdgz == 1"
                  >Focus+</el-button
                >
              </view>
              <view style="margin-left: 5px">
                <el-button
                  type="primary"
                  style="margin-top: 20px"
                  :disabled="sdgz == 1"
                  >AutoFocus</el-button
                >
                <el-button
                  type="primary"
                  style="margin-top: 20px"
                  :disabled="sdgz == 1"
                  >光学复位</el-button
                >
              </view>
            </view>

            <view>
              <el-button
                type="primary"
                :disabled="sdgz == 1"
                style="margin-top: 20px"
                @click="yscs"
                >预设参数调整</el-button
              >
              <el-button type="primary" style="margin-top: 20px" @click="sdgzsz"
                >手动跟踪</el-button
              >
              <el-button
                type="primary"
                style="margin-top: 20px"
                :disabled="sdgz == 1"
                @click="gzms = 0"
                >目标搜索</el-button
              >
              <!-- <el-button
                type="primary"
                style="margin-top: 20px"
                :disabled="sdgz == 1"
                >单次测距</el-button
              >
              <el-button
                type="primary"
                style="margin-top: 20px"
                :disabled="sdgz == 1"
                >连续测距</el-button
              > -->
            </view>
          </div>

          <div>状态参数返回区域</div>
          <div style="border: 1px solid #edeeed; padding-bottom: 5px">
            <view v-if="gzms == 0">
              当前跟踪模式：搜索模式
              <view>
                <div>第1个目标坐标: （119.2015,45.7832）</div>
                <div>第2个目标坐标: （108.8625,91.3782）</div>
                <div>第3个目标坐标: （109.7159,93.7182）</div>
                <div>第4个目标坐标: （101.8395,37.8426）</div>
                <div>第5个目标坐标: （119.4536,78.2365）</div>
                <div>焦距值: 115mm</div>
              </view>
            </view>

            <view v-else-if="gzms == 1">
              当前跟踪模式：手动/自动 跟踪模式
              <view>
                <div>跟踪状态: 跟踪正常</div>
                <div>跟踪坐标: （108.8625,91.3782）</div>
                <div>方位跟踪误差: （109.7159,93.7182）</div>
                <div>俯仰跟踪误差: （101.8395,37.8426）</div>
                <div>增益: （119.4536,78.2365）</div>
                <div>对比度: （119.4536,78.2365）</div>
                <div>预留: （119.4536,78.2365）</div>
                <div>焦距值高字节: （119.4536,78.2365）</div>
                <div>焦距值低字节: （119.4536,78.2365）</div>
                <div>检验和: （119.4536,78.2365）</div>
              </view>
            </view>
          </div>
        </view>

        <view
          class="rightBottom"
          style="background: white; flex: 0 0 30%; border: 1px solid #edeeed"
          >日志打印
          <div v-if="sdgz == 1">手动跟踪位置:</div>
          <div v-if="sdgz == 1">跟踪位置X: {{ xpos }}</div>
          <div v-if="sdgz == 1">跟踪位置Y: {{ ypos }}</div>

          <div v-if="sdgz == 0">搜索模式启动中</div>
          <div v-if="sdgz == 0">搜索到多个目标</div>

          <!-- <span style="cursor: auto">Auto......</span><br />
          <span style="cursor: crosshair">Crosshair......</span><br />
          <span style="cursor: default">Default......</span><br />
          <span style="cursor: pointer">Pointer......</span><br />
          <span style="cursor: move">Move......</span><br />
          <span style="cursor: e-resize">e-resize......</span><br />
          <span style="cursor: ne-resize">ne-resize......</span><br />
          <span style="cursor: nw-resize">nw-resize......</span><br />
          <span style="cursor: n-resize">n-resize......</span><br />
          <span style="cursor: se-resize">se-resize......</span><br />
          <span style="cursor: sw-resize">sw-resize......</span><br />
          <span style="cursor: s-resize">s-resize......</span><br />
          <span style="cursor: w-resize">w-resize......</span><br />
          <span style="cursor: text">text......</span><br />
          <span style="cursor: wait">wait......</span><br />
          <span style="cursor: help">help......</span> -->
        </view>
      </view>
    </div>
  </div>
</template>

<script>
// import homeBg from "src/assets/fileimage.jpeg";
import { ElMessage, ElMessageBox } from "element-plus";
export default {
  name: "TopMenu",
  data() {
    return {
      screenHeightPx: this.screenHeight + "px",
      screenHeight: 0,
      pageTitle: "1111",
      Menu_pos: 0,
      class: "kkhjh",

      gzms: 0, //0搜索模式 1跟踪模式

      sdgz: 0, //0 正常模式 1手动跟踪 手动跟踪 其他按钮不可点击

      xpos: 0,
      ypos: 0,
      fileurl: "../../../../../../assets/fileimage.jpeg",
    };
  },

  onload() {
    this.getvideo();
  },

  mounted() {
    console.log("onload2");
    this.$emit("message", 2);
  },

  methods: {
    sdgzsz() {
      this.sdgz = !this.sdgz;
      if (this.sdgz == 1) {
        this.gzms = 1;
      } else {
        this.gzms = 0;
      }
    },

    getMousePosition(event) {
      this.xpos = event.clientX;
      this.ypos = event.clientY;
    },
    getpos() {
      ElMessageBox.confirm(
        "是否向坐标（" + this.xpos + "," + this.ypos + ")点进行跟踪?",
        "Warning",
        {
          confirmButtonText: "是",
          cancelButtonText: "否",
          type: "warning",
        }
      )
        .then(() => {
          // ElMessage({
          //   type: "success",
          //   message: "Delete completed",
          // });
        })
        .catch(() => {
          // ElMessage({
          //   type: "info",
          //   message: "Delete canceled",
          // });
        });
      console.log("xpos=" + this.xpos + " ypos=" + this.ypos);
    },
    yscs() {
      this.$router.push("/kzcs");
    },

    getvideo() {
      var webRtcServer = null;
      //页面加载时加载视频画面,请先打开webrtc服务
      window.onload = function () {
        //video：需要绑定的video控件ID
        //启动webrtc-streamer的设备IP——工控机的ip
        webRtcServer = new WebRtcStreamer(
          "videoLive",
          "http://127.0.0.1:8000/"
        );
        //需要查看的rtsp地址
        var rtspUrl =
          "rtsp://admin:zdxk123456@192.168.1.250:554/h264/ch1/main/av_stream";
        webRtcServer.connect(rtspUrl);
      };
      //页面退出时销毁
      window.onbeforeunload = function () {
        webRtcServer.disconnect();
      };

      // const video = document.getElementById("videoLive");
      // video.pause();
      // setTimeout(function () {
      //   video.play();
      // }, 2000);
    },
  },
};
</script>

<style scoped>
.top-menu {
  background-color: #333;
  color: white;
  padding: 10px;
}

.top-menu a {
  color: white;
  text-decoration: none;
  margin-right: 20px;
  display: inline-block;
}

.top-menu a.active {
  font-weight: bold;
}

.leftCerten {
  position: relative;

  .overlay {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.3); /* 半透明遮罩 */
    z-index: 1;

    /* cursor: url(@/image/cursor_icon.png), default; */
    /* cursor: url(//img.58cdn.com.cn/resource/xxzl/captcha/pencil.png), default; */
    /* cursor: url(//img.58cdn.com.cn/resource/xxzl/captcha/pencil.png), default; */

    cursor: url("@/assets/mz.ico"), default;
    /* 
    cursor: url(@/assets/logo.png), default;
    border: 1px solid #ccc; */
  }

  .content {
    position: relative;

    .full-image {
      width: 100%; /* 使图片宽度充满容器 */
      height: 100%; /* 使图片高度充满容器 */
    }
  }
}
</style>
